<template>
    <NodeViewWrapper class="c-material" contenteditable="false">
        <div class="material-header">
            <h3 class="material-label">
                {{ node.attrs.label || '物料清单' }}
                <IPenLine @click="edit" class="edit-icon" />
            </h3>
        </div>
        <table class="material-table">
            <thead>
                <tr>
                    <th v-for="header in tableHeaders" :key="header">{{ header }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in node.attrs.material" :key="index">
                    <td>{{ item.title }}</td>
                    <td>{{ item.sku }}</td>
                    <td>{{ item.number }}</td>
                    <td>{{ item.unit }}</td>
                    <td>{{ formatPrice(item.gstInclusive) }} 元</td>
                    <td>{{ formatPrice(item.amount) }} 元</td>
                </tr>
            </tbody>
        </table>
    </NodeViewWrapper>
</template>

<script>
import IPenLine from '@icons/pen-line';
export default {
    components: {
        IPenLine
    },
    props: {
        node: Object,
        editor: Object,
        getPos: Function,
        decorations: Array,
    },
    data() {
        return {
            tableHeaders: ['物料名称', '规格', '数量', '计量单位', '含税单价', '总金额']
        };
    },
    methods: {
        edit() {
            $.emit('J_material', this.node.attrs, (formData) => {
                this.updateAttributes(formData)
            });
        },
        // 格式化价格显示（分转元）
        formatPrice(value) {
            if (!value) return "0.00";
            const num = parseFloat(value);
            return isNaN(num) ? value : (num / 100).toFixed(2);
        },
    },
}
</script>
